<template>
  <view>
    <Header type="back" title="退款" />
    <view class="w-100" :class="'h' + bar_height"></view>
    <view
      class="bg-f8ff w-100 ab left0 bottom0 rounded-right"
      :class="'top' + bar_height"
    >
      <view class="w-100 px-2-6 ov-hd-y ab top30 left0 bottom0">
        <view class="show0 circle34">
          <view class="w-100 h108 bg-white rounded-left-34">
            <view class="w-100 h-100 bg-theme rounded-bottom-34 f-b-c px-4">
              <view class="font45 t-20 font600"
                >订单{{ set_pay_status(details.orderStatus) }}</view
              >
              <!-- <view class="font28 font600 t-20"
                >积分<text class="t-theme_1"
                  >+{{ details.consumeIntegral || "0" }}</text
                ></view
              > -->
            </view>
          </view>
          <view class="w-100 bg-theme rounded-right-34">
            <view class="w-100 bg-white rounded-top-34 px-2-4 py-4">
              <view
                class="w-100 f-b-c mb-2"
                v-for="item in details.goodsList"
                :key="item.id"
              >
                <ImageFile
                  :url="item.thumbnail"
                  className="w140 h140 circle13"
                />
                <view class="w480 pt-1">
                  <view class="font25 t-20 font500">{{
                    item.goodsName || ""
                  }}</view>
                  <view class="font21 t-8 f-b-c">
                    <view>{{ item.remark || "" }}</view>
                    <view class="font22 t-20 font500"
                      >￥{{ item.totalFee || "0" }}</view
                    >
                  </view>
                  <view class="font22 t-8 f-e-c"
                    >×{{ item.number || "0" }}</view
                  >
                </view>
              </view>

              <!-- <view class="w-100 border-bottom f-b-c pb-2">
								<view class="font25 t-20">优惠券</view>
								<view class="font24 font500 t-ed">-¥10</view>
							</view> -->

              <view class="w-100 h90 f-e-c font28 font700 t-20 border-bottom">
                <text class="font21 font400"
                  >共{{ details.totalNum || "0" }}张，合计</text
                >￥{{ details.goodsFee || "0" }}
              </view>

              <view
                class="pt-3 font25 font500 t-20"
                v-if="details.orderStatus === 'PAID' && !details.destroy"
                >退货/退款信息</view
              >

              <view
                class="py-1 f-b-c font22"
                v-if="details.orderStatus === 'PAID' && !details.destroy"
              >
                <text class="t-20">联系人<text class="t-ed">*</text>：</text>
                <view>
                  <input
                    class="w470 circle8 py-1 px-2 border"
                    v-model="refund.name"
                    placeholder="请输入联系人"
                  />
                </view>
              </view>

              <view
                class="py-1 f-b-c font22"
                v-if="details.orderStatus === 'PAID' && !details.destroy"
              >
                <text class="t-20">联系方式<text class="t-ed">*</text>：</text>
                <view>
                  <input
                    class="w470 circle8 py-1 px-2 border"
                    v-model="refund.phone"
                    placeholder="请输入手机号码"
                  />
                </view>
              </view>

              <view
                class="py-1 f-b-c font22"
                v-if="details.orderStatus === 'PAID' && !details.destroy"
              >
                <text class="t-20">备注信息<text class="t-ed">*</text>：</text>
                <view>
                  <textarea
                    class="w470 circle8 h90 p-2 border"
                    v-model="refund.applyRemark"
                    placeholder="请输入退货/退款理由"
                  />
                </view>
              </view>

              <!-- <view class="w-100 f-s-a font22 t-8 pt-4">
								<view>订单须知：</view>
								<view class="w538">
									<view>
									订单支付成功后，系统将生成电子门票，请向工作人员出示  电子门票二维码。验票通过后，工作人员将为宝宝佩戴电子手环，并与家长的小程序账号进行鄉定。
									本产品门票仅限1大1小使用1次，每多一位成人，需额外支付人民币100元购买陪同票，每多一位未成年人，需额外购买张门票。
									</view>
									<view>注：1大指年满18周岁以上（含18周岁） 成年人，仆指未满18周岁未成年人。</view>
									<view>特殊群体： 6个月以下婴幼儿提供有效身份证件后可作为持卡儿童的陪同伙伴免票入场。</view>
									<view>3.建议孕妇、老人、身体有障碍人士在充分考虑自身状况后使用本产品。</view>
								</view>
							</view>
							
							<view class="w-100 f-s-a font22 t-8 pt-2">
								<view>特别提醒：</view>
								<view class="w538">本产品限定席次，订购后游玩当日及过期不支持退票，如有退票请务必于游玩日期前一日或更早日期申请.</view>
							</view> -->
            </view>
          </view>
        </view>
        <view class="w-100 h220"></view>
      </view>
    </view>
    <view
      class="w-100 px-4 fixed bottom0 pb-5 left0 z-999 option"
      v-if="details.orderStatus === 'PAID' && !details.destroy"
    >
      <view
        class="w-100 f-c-c font28 t-20 font600 bg-theme h100 circle120"
        @click="set_determine"
      >
        立即退款
      </view>
    </view>
  </view>
</template>

<script>
import Header from "../../../components/header.vue";
import ImageFile from "../../../components/img_file.vue";

import wxPay from "../../../common/weixinPay.js";

import { my_order_detail, order_afterSale } from "../../../api/order.js";
export default {
  components: {
    Header,
    ImageFile,
  },
  mixins: [wxPay],
  data() {
    return {
      bar_height: 0,
      ticketCode: "",
      details: {},
      refund: {},
      id: "",
    };
  },
  created() {
    this.bar_height = uni.getStorageSync("toprpx"); //顶部高度
    let userInfo = uni.getStorageSync("userInfo") || {};
    this.refund.phone = userInfo.phone;
  },
  onLoad(val) {
    this.id = val.id;
    this.get_details(val.id);
  },
  methods: {
    copy_order(val) {
      uni.setClipboardData({
        data: this.details.id,
        success: function () {
          console.log("success");
        },
      });
    },
    async set_determine() {
      if (this.refund.applyRemark && this.refund.phone) {
        let userInfo = uni.getStorageSync("userInfo") || {};
        let data = {
          orderItemList: this.details?.goodsList?.map((item) => item.id),
          orderSonId: this.details.id,
          orderId: this.details.id,
          applyId: userInfo?.userId,
          name: userInfo.userName,
          ...this.refund,
        };
        const { code, body } = await order_afterSale(data);
        if (code === "0") {
          uni.showToast({
            title: "提交成功，等待审核",
            icon: "none",
          });
        }
        setTimeout(() => {
          uni.reLaunch({
            url: "/pages/index/index?active=3",
          });
          // this.get_details(this.id);
        }, 1000);
      } else {
        uni.showToast({
          title: "请输入退货/退款理由和联系方式",
          icon: "none",
        });
      }
    },
    async get_details(id) {
      const { code, body } = await my_order_detail({ id });
      if (code === "0") {
        body.goodsInfo = JSON.parse(JSON.stringify(body));
        body.goodsList = body.orderItemList;
        body.totalNum = 0;
        body.orderItemList.forEach(item => {
          body.totalNum += item.number;
        });
        this.details = body;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.rounded-left-34 {
  border-radius: 34rpx 34rpx 34rpx 0;
}
.rounded-bottom-34 {
  border-radius: 34rpx 34rpx 0 34rpx;
}
.rounded-right-34 {
  border-radius: 34rpx 0 34rpx 34rpx;
}
.rounded-top-34 {
  border-radius: 0 34rpx 34rpx 34rpx;
}
</style>
